<template>
  <div class="Count-container">
    <h2>我式Count组件</h2>
    <!-- <h3>{{ countStore.school }}坐落于{{ countStore.address }}</h3>
    <h2>当前求和为：{{ countStore.sum }}</h2> -->
    <h3>{{ school }}坐落于{{ address }}</h3>
    <h2>当前求和为：{{ sum }}</h2>
    <select v-model.number="n">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
    </select>
    <button @click="add">加</button>
    <button @click="sub">减</button>
  </div>
</template>

<script setup lang="ts" name="Count">
import { useCountStore } from "@/store/count";
import { storeToRefs } from "pinia";
import { ref } from "vue";
let countStore = useCountStore();
// console.log(countStore);
//不要使用toRefs解构，storeToRefs只会对方法进行响应式包裹，不会对方法进行响应式包裹，
let { sum, school, address } = storeToRefs(countStore);

// type Props = {}
// defineProps<Props>()
// const emit = defineEmits([])
// const router = useRouter()
// const route = useRoute()
// let sum = ref(0);
let n = ref(1);
function add() {
  //第一种修改方式，直接修改
  //   countStore.sum += n.value;
  //第二种方式$patch，批量修改
  //   countStore.$patch({
  //     sum: 888,
  //     school: "黄埔军校",
  //     address: "上海",
  //   });
  //第三种，通过action的方式
  countStore.increment(n.value);
}
function sub() {
  sum.value -= n.value;
}
countStore.$subscribe((mutate, state) => {
  //箭头函数，不能使用this。本来setup里面也不建议使用this
  console.log("countStore数据发生了变化", mutate, state);
});
</script>

<style scoped lang="scss">
.Count-container {
  background-color: skyblue;
  padding: 10px;
  border-radius: 10px;
  box-shadow: 0 0 10px;
  select,
  button {
    margin: 0 5px;
    height: 25px;
  }
}
</style>
